<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
// import { getChartsData } from '@/api/screen/Year/index.ts'
// import { data, reqDataType } from '@/api/screen/Year/type.ts'
//获取图形图标的DOM节点
let charts = ref()

onMounted(async () => {
  let myCharts = echarts.init(charts.value)
  // const option = {
  //   legend: {
  //     top: '0',
  //     left: 'right',
  //     data: ['上海', '北京'],
  //     textStyle: {
  //       color: '#fff',
  //       fontSize: 14,
  //     },
  //   },
  //
  //   radar: {
  //     shape: 'circle', // 外环的形状（圆形/多边形）
  //     splitNumber: 5, // 外环圈数
  //     indicator: [
  //       // 每项指标的最大值设置
  //       { name: '2023' },
  //       { name: '2022' },
  //       { name: '2021' },
  //       { name: '2020' },
  //       { name: '2019' },
  //       { name: '2018' },
  //     ],
  //     splitLine: {
  //       // 外环分割线样式
  //       lineStyle: {
  //         color: '#45BCE4',
  //         type: 'dashed',
  //       },
  //     },
  //     splitArea: {
  //       show: false,
  //     },
  //     axisLine: {
  //       // 坐标轴线样式设置
  //       lineStyle: {
  //         color: '#45BCE4',
  //       },
  //     },
  //   },
  //   series: [
  //     {
  //       name: 'Budget vs spending',
  //       type: 'radar',
  //
  //       data: [
  //         {
  //           value: [17000, 3000, 2900, 7500, 12000, 8020],
  //           name: '上海',
  //           itemStyle: {
  //             // 多边形线颜色
  //             color: '#47EB99',
  //           },
  //           areaStyle: {
  //             opacity: 0.5,
  //           },
  //         },
  //         {
  //           value: [7000, 13000, 5000, 1000, 2000, 10020],
  //           name: '北京',
  //           itemStyle: {
  //             color: '#47EAEB',
  //           },
  //           areaStyle: {
  //             opacity: 0.5,
  //           },
  //         },
  //       ],
  //     },
  //   ],
  // }
  //设置配置项
  const arrSum = (yData: any) => {
    const list = yData.map((v: any) => v.data)
    const xLen = list[0].length
    let result = list.reduce((total: any, value: any) => {
      let sumList = []
      for (let i = 0; i < xLen; i++) {
        sumList.push(total[i] + value[i])
      }
      console.log(sumList)
      return sumList
    })
    console.log(result)
    return result
  }

  const xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月']

  const yData = [
    {
      name: '香蕉',
      data: [256, 125, 140, 56, 450, 478, 100],
    },
    {
      name: '苹果',
      data: [135, 255, 100, 12, 456, 578, 562],
    },
    {
      name: '梨子',
      data: [100, 255, 100, 12, 456, 578, 562],
    },
  ]

  let series1 = yData.map((item) => {
    return {
      name: item.name,
      data: item.data,
      type: 'bar',
      stack: 'fruit',
      emphasis: { focus: 'series' },
      animationDuration: 1500,
      animationEasing: 'cubicInOut',
      barWidth: 20,
      // barMinHeight: 50,
      barGap: 1,
      itemStyle: {
        borderRadius: 2,
        borderWidth: 2,
        borderColor: 'transparent',
        borderJoin: 'round',
        borderType: 'solid',
      },
      label: {
        show: true,
        color: '#fafafa',
        fontSize: 12,
      },
    }
  })

  const series2 = {
    name: 'Total',
    color: '#a1a6b1',
    data: arrSum(yData),
    type: 'line',
    lineStyle: {
      // type: 'dashed',
      // 实线宽度,虚线宽度
      type: [8, 6],
      dashOffset: 0,
    },
    label: {
      show: true,
      color: 'inherit',
      fontSize: 12,
    },
  }
  const option = {
    series: [...series1, series2],
    yAxis: [
      {
        type: 'value',
      },
    ],
    grid: {
      top: '20%',
      left: '2%',
      right: '3%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xData,
      axisLine: { show: false },
      axisTick: { show: false },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      textStyle: {
        color: '#fafafa',
      },
      borderColor: 'transparent',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      extraCssText: 'backdrop-filter: blur(6px);',
      order: 'seriesDesc',
    },
    legend: {
      show: true,
      right: 20,
      top: 15,
      icon: 'roundRect',
      itemHeight: 5,
      itemWidth: 10,
      itemGap: 40,
      textStyle: {
        fontSize: 12,
      },
      itemStyle: {
        borderColor: 'transparent',
        borderWidth: 6,
      },
    },
  }

  myCharts.setOption(option)
})
</script>

<template>
  <div class="sex">
    <div class="title">
      <p>年度游客量对比</p>
      <div class="img"></div>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<style scoped lang="scss">
.sex {
  height: 340px;
  background: url('../images/dataScreen-main-lt.png') no-repeat;
  background-size: cover;
  color: white;
  position: relative;
  .title {
    font-size: 24px;
  }
  .img {
    width: 68px;
    height: 7px;
    background: url('../images/dataScreen-title.png') no-repeat;
    background-size: cover;
    margin-top: 8px;
  }
  .charts {
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 80%;
  }
}
</style>
